<template>
	<w-layout showNavbar navTitle="换箱" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<up-tabs
					@change="tabChange"
					:list="tabs.list" 
					:current="tabs.current"
					lineWidth="14"
					lineHeight="14"
					:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
					:activeStyle="{
						color: publicStyles['--color'],
						fontWeight: 'bold',
						transform: 'scale(1.2)'
					}"
					itemStyle="height: 60px;"
					:inactiveStyle="{
						'font-size': '32rpx',
					}"
				>
				</up-tabs>
				<view class="">
					<view @click="chooseBox(item)" class="public-card-7 fr px-50 py-60 mt-40" style="position: relative;" v-for="(item,index) in state.list" :key="index">
						<view class="fc-ac">
							<image style="width: 128rpx;height: 128rpx;" src="/static/icon/public/box.png" mode=""></image>
							<view class="mt-15">
								<text>剩</text>
								<text class="color">{{item.surplus_all_stock}}</text>
								<text>张</text>
							</view>
						</view>
						<!-- <view class="ml-auto" style="display: grid;grid-template-columns: repeat(3,1fr);column-gap: 30rpx;row-gap: 30rpx;">
							<view class="" v-for="(item2,index2) in item.goodslist" :key="index2">
								<text>{{item2.shang_title}}</text>
								<text class="color ml-5">{{item2.surplus_stock}}/{{item2.stock}}</text>
							</view>
						</view> -->
						<view class="ml-30 fr fw gap-30" style="">
							<view class="" v-for="(item2,index2) in item.goodslist" :key="index2">
								<text>{{item2.shang_title}}</text>
								<text class="color ml-5">{{item2.surplus_stock}}/{{item2.stock}}</text>
							</view>
						</view>
						<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
							<cut-corner :arrow="3" clipSize="12rpx">
							<view class="px-18 py-6 fs-24" style="background-color: var(--color);color: #002C33;">
								第<text class="mx-8">{{item.num}}</text>箱
							</view>
							</cut-corner>
						</view>
						<view v-if="item.surplus_all_stock == 0" class="w-100 h-100 fc-ac-jc" style="position: absolute;top: 0;left: 0;z-index: 88;background-color: rgba(1,18,29,0.7);">
							<view class="text-color-b fs-40">
								已售罄
							</view>
						</view>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		getJumpData
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		getCurrentInstance
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		goodslist_count,
		goodslist_content
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	const CurrentInstance = getCurrentInstance()
	
	onLoad(async(options) => {
		if(options.id){
			state.goods_id = options.id
			await get_goodslist_count()
			await get_goodslist_content()
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'1-5箱',
			},
			{
				id:'',
				name:'6-10箱',
			},
			{
				id:'',
				name:'6-10箱',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		get_goodslist_content()
	}
	
	const state = reactive({
		goods_id: '',
		
		list:[],
		page:1,
		limit:15,
		last_limit:15,
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	
	async function get_goodslist_count(){
		const res = await goodslist_count({
			goods_id: state.goods_id
		})
		tabs.list = res.map(e=>{
			return{
				id: e.page_no,
				name: e.title
			}
		})
	}
	
	async function get_goodslist_content(){
		const res = await goodslist_content({
			sort:1,
			page_no: tabs.list[tabs.current].id,
			goods_id: state.goods_id
		})
		state.last_limit = res.length
		state.list = state.list.concat(res)
	}
	
	function chooseBox(item){
		uni.navigateBack({
			delta:1,
			success: () => {
				getJumpData.apply(CurrentInstance.proxy,['emit','chooseBox',item])
			}
		})
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
</style>